
<template>
  <div class="whole">
    <van-list v-model="vanList.loading"
          :finished="vanList.finished"
          :error.sync="vanList.error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          loading-text="加载中..."
          :immediate-check="false"
          @load="onLoad">
    <template v-if="list.length > 0">
    <div class="material-center-box" v-for="(item, index) in list" :key="index" @click="shareClick(item)">
      <div class="head_image" @click="JumpName('materialDetail', {detailId:item.id})"><img :src="item.shop_info.head_image"></div>
      <div class="content-box">
        <div class="shop_name" @click="JumpName('materialDetail', {detailId:item.id})">{{item.shop_info.nickname}}</div>
        <template v-if="item.content">
          <div class="content" @click="JumpName('materialDetail', {detailId:item.id})">
            <p :class="item.hide && item.hide == 'show' ? '' : 'hide'" v-html="item.content.replace(/\n/g, '<br>')"></p>
          </div>
          <div v-if="(item.content.replace(/\n/g, '').length > 116 || item.content.split('\n').length >5)&& item.hide != 'show'" class="look_all" @click="showAll(index, 'show')">全文</div>
          <div v-else-if="item.hide && item.hide == 'show'" class="look_all" @click="showAll(index, 'hide')">收起</div>
        </template>

        <div class="image-list" v-if="item.images.length > 0">
          <template v-if="item.images.length == 1">
            <img :src="item.images[0]" class="one-list" @click.stop="bigImage(item.images, 0)" mode="aspectFill">
          </template>
          <template v-else-if="item.images.length == 4">
            <img :src="item.images[0]" @click.stop="bigImage(item.images, 0)" mode="aspectFill">
            <img :src="item.images[1]" @click.stop="bigImage(item.images, 1)" mode="aspectFill">
            <div class="seat"></div>
            <img :src="item.images[2]" @click.stop="bigImage(item.images, 2)" mode="aspectFill">
            <img :src="item.images[3]" @click.stop="bigImage(item.images, 3)" mode="aspectFill">
          </template>
          <template v-else>
            <img v-for="(img, i) in item.images" :key="i" :src="img" @click.stop="bigImage(item.images, i)" mode="aspectFill">

          </template>

        </div>
        <div class="label-box" v-if="item.label.length > 0">
          <div class="label-box-title">标签：</div>
          <div class="label-box-content">
            <span v-for="(label, i) in item.label" :key="i">{{label}}</span>
          </div>
        </div>
        <div class="goods" v-if="item.item_info" @click.stop="JumpName('item-detail', {detailId:item.item_info.item_id})">
          <div class="goods-flex">
            <div class="img_path"><img :src="item.item_info.img_path"></div>
            <div class="content-item">
              <div class="title">{{item.item_info.item_title}}</div>
              <div class="price">¥{{item.item_info.start}}<template v-if="item.item_info.end && item.item_info.end>item.item_info.start"><span>-</span>¥{{item.item_info.end}}</template></div>
            </div>
            <div class="img_link"><img src="https://img.wifenxiao.com/h5-wfx/images/icon_right.png"></div>
          </div>
        </div>
        <div class="operation">
          <template v-if="item.supplier_id == supplier_id && supplier_id > 0">
            <img @click.stop="deleteClick(item)" src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/delete1.png">
            <div @click.stop="deleteClick(item)" class="wechart">删除</div>
          </template>
          <wx-button open-type="share" data-value="item">
            <img src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/wechart.png">
          </wx-button>
          <wx-button open-type="share">
            <div class="wechart" @click.stop="shareClick(item)">分享</div>
          </wx-button>
          <template v-if="item.images.length > 0">
            <img @click.stop="saveImage(item)" src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/downLoad.png">
            <div @click.stop="saveImage(item)">下载</div>
          </template>
        </div>
      </div>
    </div>
    </template>
    </van-list>
    <no-data :noData='noData' v-if="vanList.finished && list.length == 0"></no-data>
    <img v-if="cateList.length > 0 && (!is_gys || is_gys && allow_supplier_power == 0)" class="show-cate" @click="catePop = true" src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/cateIcon.png">
    <van-popup v-model="catePop" closeable round close-icon="close" position="bottom" :style="{ height: '70%', width: '100%' }" @close="catePop = false">
      <div class="cate-list">
        <div class="cate-item" :class="{active: category_id == item.id}" v-for="(item, index) in cateList" :key="index" @click="changeCate(item.id)">
          <div><img :src="item.image ? item.image : 'https://img.wifenxiao.com/h5-wfx/images/materialCenter/default_goods_img.jpg'"></div>
          <div class="title">{{item.name}}</div>
        </div>
      </div>
    </van-popup>
    <template v-if="is_gys && allow_supplier_power == 1">
      <div class="gys-operation">
        <div @click="showPop('catePop')"><img src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/cateOpation.png">素材分类</div>
        <div @click="showPop('upPop')"><img src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/upOpation.png">发布素材</div>
        <div @click="JumpName('materialHistory', {supplier_id})"><img src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/historyOpation.png">发布历史</div>
      </div>
    </template>
    <van-popup v-model="upPop" position="bottom" :style="{ height: '100%', width: '100%' }" @close="upPop = false">
      <materialsRelease @success="closePop"></materialsRelease>
    </van-popup>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
    <van-dialog
      v-model="deletePop"
      show-cancel-button
      confirm-button-text="确定"
      class="common-confirm"
      @confirm="deleteOk"
    >
    <div class="donation-box">
        <div class="con-box">
          <div class="title">提示</div>
          <div class="input-box clearfix zhuan-box">
            <div class="tongMsg">确定删除该素材？</div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { ImagePreview, Dialog } from 'vant'
import {mpShare} from '@/utils/utils'
Vue.use(ImagePreview)
Vue.use(Dialog)
import { getLists, getAllCate, gysDel } from '@/api/community/materialCenter'
import small from '@/smallapp/small'
import noData from '@/components/noData/index'
import materialsRelease from './materialOperate/materialsRelease'
import SmallLogin from '@/components/SmallLogin/smallLogin'

export default {
  components: {
    noData,
    materialsRelease,
    SmallLogin
  },
  data() {
    return {
      p: 1,
      list: [],
      vanList: {
        loading: false,
        error: false,
        finished: false
      },
      noData: {
        text: '暂无素材',
        img: 'https://img.wifenxiao.com/h5-wfx/images/materialCenter/no_materical.png',
        marginTop: '10em'
      },
      category_id: '',
      cateList: [],
      catePop: false,
      upPop: false,
      deletePop: false,
      deleteData: {},
      allow_supplier_power: 0, // 是否开启是否允许供应商发布素材 1 开启 0 未开启
      is_gys: 0, // 1 是供应商 0 不是 默认0
      supplier_id: 0 // 供应商ID 默认0
    }
  },
  methods: {
    showPop(type) {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
        return
      }
      if (type == 'catePop') {
        this.catePop = true
      } else if (type == 'upPop') {
        this.upPop = true
      }
    },
    closePop(data) {
      if (data == 'close') {
        this.upPop = false
      } else if (data == 'success') {
        this.JumpName('materialHistory', { supplier_id: this.supplier_id })
        // this.p = 1
        // this.category_id = ''
        // this.list = []
        // this.vanList.finished = false
        // this.vanList.loading = false
        this.upPop = false
        // this.onLoad()
      }
    },
    saveImage(item) {
      small.saveImageQueue(item.images, item.content)
    },
    showAll(index, show) {
      this.$set(this.list[index], 'hide', '')
      this.$set(this.list[index], 'hide', show)
    },
    deleteClick(data) {
      this.deletePop = true
      this.deleteData = data
      // Dialog.confirm({
      //   title: '提示',
      //   message: '确定删除该素材？'
      // }).then(() => {
      //   this.$loadingWrap.show()
      //   gysDel({ id: data.id }).then(res => {
      //     this.$loadingWrap.close()
      //     if (res.status === 1) {
      //       this.$Error('删除成功')
      //       const newList = this.list.filter(item => item.id !== data.id)
      //       // this.p = 1
      //       this.list = newList
      //       // this.vanList.finished = true
      //       // this.vanList.loading = true
      //       // this.onLoad()
      //     } else {
      //       this.$Error(res.msg)
      //     }
      //   })
      // }).catch(() => {
      //   // on cancel
      // })
    },
    deleteOk() {
      this.$loadingWrap.show()
      gysDel({ id: this.deleteData.id }).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          this.$Error('删除成功')
          const newList = this.list.filter(item => item.id !== this.deleteData.id)
          // this.p = 1
          this.list = newList
          this.deletePop = true
          // this.vanList.finished = true
          // this.vanList.loading = true
          // this.onLoad()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    shareClick(data) {
      // TODO 小程序分享
      const option = {
        title: data.jsapi_title,
        imgUrl: data.images.length > 0 ? data.images[0] : data.shop_info.head_image,
        shareParam: data.jsapi_url.split('?')[1]
        // shareParam: `sid=${small.globalData.shopId}&pid=${small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'}&id=${data.id}`
      }
      // console.log('分享center', option)
      // mpShare (true, true, '/activity/pages/materialCenter/index', option, '/materialCenter')
      mpShare (true, true, '/activity/pages/materialDetail/index', option,'/materialDetail')

    },
    init() {
      this.$loadingWrap.show()
      this.onLoad()
    },
    onLoad() {
      // 临时处理 不知道为什么一直会加载
      if (!this.vanList.loading ) {
      this.$loadingWrap.show()
      getLists({ p: this.p, category_id: this.category_id }).then(res => {
        this.$loadingWrap.close()
        if (res.status === 1) {
          if (this.p == 1) {
            this.allow_supplier_power = res.data.allow_supplier_power
            this.supplier_id = res.data.supplier_id
            this.is_gys = res.data.is_gys
            this.list = res.data.data
          } else {
            this.list.push(...res.data.data)
          }
          if (res.data.data.length < 10) {
            this.vanList.finished = true
            this.vanList.loading = true
          } else {
            this.p++
            this.vanList.loading = false
          }
        }else {
          this.$Error(res.msg)
        }
      })
      }
    },
    JumpName(name, data) {
      if (name == 'materialHistory') {
        if (!small.checkLogin()) {
          this.$refs.smalllogin.openSmallLoginPop()
          return
        }
      }
      this.$JumpName(this, name, data)
    },
    bigImage(data, index) {
      // TODO 小程序图片预览
      wx.previewImage({
        current: index, //当前图片地址
        urls: data,  //所有要预览的图片的地址集合数组形式
      })
    },
    cateLists() {
      getAllCate().then(res => {
        if (res.status === 1) {
          this.cateList = res.data
        }
      })
    },
    changeCate(id) {
      if (this.category_id == id) {
        this.category_id = ''
      } else {
        this.category_id = id
      }
      this.p = 1
      this.catePop = false
      this.$loadingWrap.show()
      this.vanList.loading = false
      this.onLoad()
    }
  },
  watch: {
    $route(to, from) {
      console.log(to, from)
      if (from.name == 'materialHistory') {
        this.p = 1
        this.list = []
        this.vanList.finished = false
        this.vanList.loading = true
        this.onLoad()
      }
    }
  },
  mounted() {
    if (!small.checkLogin()) {
      this.$refs.smalllogin.openSmallLoginPop()
    }
    window.$$subscribe('loginReload', reload => {
      if (reload) {
        this.init()
      }
    })
    // this.init()
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  created() {
    this.init()
    this.cateLists()
    // console.log('id', this.$route.query)
    if (this.$route.query.id || this.$route.query.detailId) {
      this.$loadingWrap.show()
      this.JumpName('materialDetail', {detailId: this.$route.query.id})
    }
  }
}
</script>
<style lang="scss">
@import "~@/styles/mixin";
.whole {
  padding: 0 32px 32px 32px;
  background: #fff;
  .h5-i {
    font-size: 40px
  }
}
.material-center-box{
  padding: 24px 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #E5E6EB;
  .head_image{
    width: 70px;
    height: 70px;
    border-radius: 8px;
    margin-right: 16px;
    overflow: hidden;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .content-box {
    flex: 1;
    .shop_name {
      font-weight: 600;
      font-size: 32px;
      margin-bottom: 8px;
    }
    .content {
      padding-right: 8px;
      p {
        font-size: 28px;
        line-height: 40px;
        word-break: break-all;
        &.hide{
          @include lineClamp(28px, 40px, 5);
        }
      }
    }
    .look_all {
      color: #337ECC;
      font-size: 28px;
    }
    .image-list {
      padding-top: 16px;
      display: flex;
      flex-wrap: wrap;
      img, .seat {
        margin:0 8px 8px 0;
        width: 192px;
        height:192px;
        object-fit: cover;
        &.one-list {
          width: 392px;
          height: 392px;
        }
      }
    }
    .label-box {
      display: flex;
      font-size: 20px;
      color: #666666;
      margin-top: 16px;
      align-items: baseline;
      .label-box-content {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          width: auto;
          padding: 2px 16px;
          line-height: 28px;
          border-radius: 50px;
          margin-right: 8px;
          margin-bottom: 8px;
          border: 2px solid #C9CDD4;
        }
      }
    }
    .goods {
      background-color: #F7F7F7;
      margin-top: 16px;
      padding: 16px;
      border-radius: 4px;
      .goods-flex {
        display: flex;
        align-items: center;
        .img_path {
          img {
            width: 84px;
            height: 84px;
            border-radius: 4px;
            margin-right: 16px;
          }
        }
        .content-item {
          flex: 2;
          .title {
            margin-bottom: 6px;
            margin-right: 16px;
            @include lineClamp(24px, 32px, 1);
          }
          .price {
            font-size: 20px;
            span {
              margin: 0 8px;
            }
          }
        }
        
        .img_link {
          width: 24px;
          height: 24px;
          text-align: center;
          img {
            height: 18px;
          }
        }
      }
    }
    .operation {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 24px;
      color: #666;
      font-size: 24px;
      .wechart {
        margin-right: 32px;
      }
      img {
        width: 32px;
        height:32px;
        margin-right: 4px;
      }
    }
  }
}
.show-cate {
  position: fixed;
  width: 80px!important;
  height: 80px!important;
  left: 26px;
  bottom: 60px;
  background: #eeeeee;
  border-radius: 8px;
  z-index: 999;
}
.cate-list {
  display: flex;
  padding: 80px 20px 40px 20px;
  flex-wrap: wrap;
  .cate-item {
    width: 25%;
    text-align: center;
    margin-bottom: 40px;
    &.active {
      color: #FF2B49;
      font-weight: bold;
      image {
      border: 4px solid #FF2B49;
      border-radius: 5px
      }
    }
  
    image {
      width: 80%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
    .title {
      margin-top: 10px;
      @include lineClamp(26px,1.4,2);
    }
  }
}

.gys-operation {
  position: fixed;
  bottom: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  z-index: 20;
  // align-items: center;
  justify-content: space-between;
  // margin: 32px;
  border-radius: 64px;
  background: #fff;
  padding: 24px 40px;
  box-shadow: 0px 2px 8px 0px #0000001A;
  color: #FF2A40;
  font-size: 28px;
  font-weight: 500;
  div {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      margin-right: 8px;
    }
  }
}
.history-pop {
  background: #fff;
}
.donation-box{
  .title {
    font-size: 35px;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
  }
  .con-box{
    position:relative;
    padding:40px 60px;
  }
  
  .input-box{
    margin:16px 0;
    font-size:28px;
    .tongMsg {
      text-align: center;
      margin-top: 16px;
      font-size: 26px;
    }
  }
}
</style>